<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.css" rel="stylesheet" />
		<style>
			body{
				background: #FFFFFF;
			}
			.mui-bar{
				background:linear-gradient(180deg,rgba(252,126,119,1) 0%,rgba(254,96,93,1) 100%);
			}
			a , .mui-title{
				color:#FFFFFF;
			}
			.container_watch{
				width: 100%;
				position: relative;
				float: left;
				margin-top: 70px;
				box-sizing: border-box;
			}
			.watch_one{
				width: 100%;
				position: relative;
				float: left;
				box-sizing: border-box;
			}
			.watch_two{
				font-size:16px;
				font-family:PingFang-SC-Bold;
				font-weight:bold;
				color:rgba(51,51,51,1);
				padding-left: 15px;
				box-sizing: border-box;
			}
			.watch_three{
				width: 100%;
				position: relative;
				float: left;
			}
			.three_fir{
				width: 39%;
				position: relative;
				float: left;
				padding-left: 15px;
				padding-top: 20.5px;
				box-sizing: border-box;
			}
			.three_fir>img{
				width:116.5px;
				height:73.5px;
				border-radius:2px 2px 0px 0px;
			}
			.three_se{
				width: 57%;
				position: relative;
				float: left;
				box-sizing: border-box;
				padding-top: 17px;
			}
			.three_se>span:nth-child(1){
				font-size:15px;
				font-family:PingFang-SC-Medium;
				font-weight:500;
				color:rgba(51,51,51,1);
				padding-right: 10px;
			}
			.three_se>span:nth-child(2){
				background:rgba(254,97,94,1);
				border-radius:3px;
				padding: 4px 10px;
				font-size:12px;
				font-family:PingFang-SC-Medium;
				font-weight:500;
				color:rgba(255,255,255,1);
			}
			.three_thi{
				width: 61%;
				position: relative;
				float: none;
				line-height:50px;
			}
			.three_thi>img{
				width: 11px;
				height: 16px;
				position: relative;
				float: left;
				margin-top: 18px;
			}
			.three_thi>span{
				font-size:13px;
				font-family:PingFang-SC-Medium;
				font-weight:500;
				color:rgba(153,153,153,1);
				padding-left: 8px;
				box-sizing: border-box;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">观看纪录</h1>
		</header>	
		<div class="container_watch">
			<div class="watch_one">
				<div class="watch_two">今天</div>
				<div id="jintian">
				</div>
			</div>
			<div class="watch_one">
				<div class="watch_two">更早</div>
				<div id="gengzhao">
				</div>
			</div>
		</div>
		<script src="../js/mui.js"></script>
		<script src="../js/jquery-3.1.1.min.js"></script>
		<script type="text/javascript">
			mui.plusReady(function(){
				var url = plus.storage.getItem('url');
				var user = plus.storage.getItem('user');
				user = JSON.parse(user);
				var page = 1;
				
				
				
				mui.init({
				  pullRefresh : {
				    container:'.container_watch',//待刷新区域标识，querySelector能定位的css选择器均可，比如：id、.class等
				    up : {
				      height:50,//可选.默认50.触发上拉加载拖动距离
				      auto:true,//可选,默认false.自动上拉加载一次
				      contentrefresh : "正在加载...",//可选，正在加载状态时，上拉加载控件上显示的标题内容
				      contentnomore:'没有更多数据了',//可选，请求完毕若没有更多数据时显示的提醒内容；
				      callback :function(){
						  // mui('.container_watch').pullRefresh(;
						  // setTimeout(function(){
							 //  mui('.container_watch').pullRefresh().endPullupToRefresh();
						  // },1500)
						  getData(function(){
							  mui('.container_watch').pullRefresh().endPullupToRefresh();
						  })
						  
					  } //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
				    }
				  }
				});
				
				
				function getData(func){
					if(page==0){
						mui.toast('没有更多了');
						if(func){
							func();
						}
						return;
					}
					plus.nativeUI.showWaiting();
					mui.post(url+'/juyou/index/getmyrecords',{token:user.token},function(res){
						plus.nativeUI.closeWaiting();
						var str = '';
						var strs = '';
						if(res.data.length<10){
							page = 0;
						}else{
							page = page+1;
						}
						mui.each(res.data,function(i,v){
							if(v.jintian==1){
								if(v.youxiaoqi){
									str+='<div data-id="'+v.shipin.id+'" class="watch_three">'+
										'<div class="three_fir">'+
											'<img src="'+v.shipin.covers+'" alt="">'+
										'</div>'+
										'<div class="three_se">'+
											'<span>'+v.shipin.name+'</span>'+
											'<span>'+v.youxiaoqi+'</span>'+
										'</div>'+
									'</div>';
								}else{
									str+='<div data-id="'+v.shipin.id+'" class="watch_three">'+
										'<div class="three_fir">'+
											'<img src="'+v.shipin.covers+'" alt="">'+
										'</div>'+
										'<div class="three_se">'+
											'<span>'+v.shipin.name+'</span>'+
											// '<span>'+v.youxiaoqi+'</span>'+
										'</div>'+
									'</div>';
								}
								
							}else{
								if(v.youxiaoqi){
									strs+='<div data-id="'+v.shipin.id+'" class="watch_three">'+
										'<div class="three_fir">'+
											'<img src="'+v.shipin.covers+'" alt="">'+
										'</div>'+
										'<div class="three_se">'+
											'<span>'+v.shipin.name+'</span>'+
											'<span>'+v.youxiaoqi+'</span>'+
										'</div>'+
									'</div>';
								}else{
									strs+='<div data-id="'+v.shipin.id+'" class="watch_three">'+
										'<div class="three_fir">'+
											'<img src="'+v.shipin.covers+'" alt="">'+
										'</div>'+
										'<div class="three_se">'+
											'<span>'+v.shipin.name+'</span>'+
											// '<span>'+v.youxiaoqi+'</span>'+
										'</div>'+
									'</div>';
								}
								
							}
						})
						$("#jintian").append(str)
						$("#gengzhao").append(strs);
						if(func){
							func();
						}
					})
				}
				
				mui(".watch_one").on("tap",".watch_three",function(){
					// mui.alert($(this).attr('data-id'));
					var id = $(this).attr('data-id');
					mui.openWindow({
						url:"../sub1/video.html",
						id:"../sub1/video.html",
						extras: {
						videoid:id,
						},
					})
				})
			})
		</script>
	</body>

</html>
